<template>
  <!-- tab栏 -->
  <div>
    <div
      class="pagerecommend"
      @mouseenter="showMouseenter"
      @mouseleave="hideMouseleave"
    >
      <div class="addrecommend">
        <div
          class="recommend-left"
          :class="{ actvie: index === curIndex }"
          v-for="(item, index) in addList"
          :key="index"
          @mouseover="mouseover(index)"
        >
          <span class="addleft">{{ item.type }}</span>
          <span class="el-icon-arrow-right"></span>
        </div>

        <div class="add-right" v-if="isShow">
          <div
            class="recommend-right"
            v-for="(value, index) in city[curIndex]"
            :key="index"
          >
            <span class="left-index" @click="sendCity(index, value)">{{
              index + 1
            }}</span>
            <span class="left-city" @click="sendCity(index, value)">{{
              value.city
            }}</span>
            <span class="left-desc" @click="sendCity(index, value)">{{
              value.desc
            }}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="recommendcity">
      <div class="middlecity">推荐城市</div>
      <div class="picturecity">
          <el-carousel :interval="3000" arrow="always" height="174px">
          <el-carousel-item v-for="(item, index) in imgs" :key="index">
            <img :src="item.url" alt="" @click="$router.push(item.link)" />
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgs: [
        {
          url:
            "http://fe-xianyun-web.itheima.net/images/pic_sea.jpeg",
        },
        {
          url:
            "https://p3-q.mafengwo.net/s13/M00/41/C4/wKgEaVyaOs2AA9IKAAj8Lg2YzaU64.jpeg?imageMogr2%2Fthumbnail%2F1360x%2Fstrip%2Fquality%2F90",
        },
        {
          url:
            "https://n3-q.mafengwo.net/s10/M00/E8/E4/wKgBZ1octoCABhgLAAafahORRLs91.jpeg?imageView2%2F2%2Fw%2F1360%2Fq%2F90",
        },
      ],
      addList: [],
      city: [],
      curIndex: null,
      isShow: false,
      pageIndex: 0,
      pageSize: 5,
      total: 0,
    };
  },
  created() {
    this.$axios({
      url: "/posts/cities",
    }).then((res) => {
      console.log(res.data.data);
      this.addList = res.data.data;
      let newChildren = [];

      this.addList.forEach((children) => {
        newChildren.push(children.children);
      });
      this.city = newChildren;
    });
  },
  methods: {
    mouseover(index) {
      this.curIndex = index;
    },
    showMouseenter() {
      this.isShow = true;
    },
    hideMouseleave() {
      this.isShow = false;
      this.curIndex = null;
    },
    sendCity(index, value) {
      console.log(index, value.city);
      this.$axios({
        url: "/posts",
        params: {
          city: value.city,
          _start: this.pageIndex,
          _limit: this.pageSize,
        },
      }).then((res) => {
        console.log(res.data.data.length);
        if (res.data.data.length == 0) {
          this.$confirm("没有该搜索结果,准备回到首页", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
            center: true,
          }).then(() => {
            this.$router.go(0);
          });

          // this.$message("没有该搜索结果,准备回到首页");
        }
        this.$emit("sendData", res.data);
        this.$emit("sendTotal", res.data.total);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.pagerecommend {
  width: 260px;
  .addrecommend {
    position: relative;
    width: 260px;
    // height: 170px;
    border: 1px solid #ccc;
    border-bottom: none;
    margin-bottom: 20px;
    // 左边热门城市
    .recommend-left {
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 42px;
      padding: 0 20px;
      border-bottom: 1px solid #ccc;
      font-size: 14px;

      // &:hover {
      //   color: orange;
      // }
      .addleft {
        flex: 1;
      }
      .el-icon-arrow-right {
        width: 15px;
        font-size: 22px;
      }
    }
    .actvie {
      color: #ffa500;
    }
    .actvie::after {
      content: "";
      position: absolute;
      top: 0;
      left: 259px;
      width: 10px;
      height: 42px;
      background-color: #fff;
      z-index: 999;
    }

    // 右边城市地点
    .add-right {
      position: absolute;
      top: -1px;
      left: 260px;
      width: 330px;
      border: 1px solid #ccc;
      z-index: 99;
      background: #ffffff;
      padding-bottom: 10px;
      .recommend-right {
        width: 330px;
        padding: 10px 0px 0px 10px;
        .left-index {
          font-style: italic;
          font-weight: 400;
          font-size: 22px;
          color: #ffa500;
          padding: 0 6px;
          cursor: pointer;
        }
        .left-city {
          font-size: 14px;
          color: #ffa500;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
        .left-desc {
          font-size: 14px;
          color: #b2b2b2;
          cursor: pointer;
          &:hover {
            text-decoration: underline;
          }
        }
      }
    }
  }
}
.recommendcity {
  .middlecity {
    width: 260px;
    padding-bottom: 10px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
  }
  .picturecity {
    display: block;
    width: 260px;
    height: 174px;
    // background: chocolate;
    cursor: pointer;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>